<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="csrf-token" content="{{ csrf_token() }}" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="/admin/css/system.css"/>
		<title>河南全一安防</title>
		<Link Rel="SHORTCUT ICON" href="/admin/images/head_logo.png">
		<style>

        rect{
        	fill-opacity: 0! important;
    stroke-opacity: 0 ! important;
        }
		</style>
	</head>
	<body>
		<div class="header">
			<img src="/admin/img/logo1.png"/>
			<div class="user">
				<p><a href="">{{ $admin['agent_name'] }}</a></p>
				<p><a href="/admin/log/index">系统管理</a></p>
				<p><a href="/admin/login/exit">退出</a></p>
			</div>
		</div>
		<div class="system">
			<div id="dituContent">
			</div>
			
			<div class="shousuotop">
				<div class="top">
				<li><img src="/admin/img/jizhanoff.png"/></li>
				<li><img src="/admin/img/yanganoff.png"/></li>
				<li><img src="/admin/img/hongwaioff.png"/></li>
				<li><img src="/admin/img/ranqioff.png"/></li>
				<li><img src="/admin/img/electricoff.png"/></li>
				<li><img src="/admin/img/call_help_off.png"/></li>
				<li><img src="/admin/img/relituoff.png"/></li>
				<li><img src="/admin/img/disanfangoff.png"/></li>
				<li><img src="/admin/img/yonghuoff.png"/></li>
				<li><img src="/admin/img/wuyeoff.png"/></li>
				<li><img src="/admin/img/xiaofangzhiduioff.png"/></li>
				<li><img src="/admin/img/lishizhaohuodianoff.png"/></li>
				<li><img src="/admin/img/alarmoff.png" id ='yjbjon'/></li>
				<li><a href="/admin/log/index"><img src="/admin/img/baobiaooff.png"/></a></li>
				<!-- <p><input type="checkbox" name="" id="" />全部显示</p> -->
			</div>
			<button id="shouqitop">&Lambda;</button>
			</div>
			
			<div class="shousuoright">
				<div id="camera"></div>
				<div class="right">
				<div class="title">全部消息</div>
				<!-- <div id="canvasDiv"></div> -->
			 <div id="chartdiv" style="width: 25em; height: 15em;"></div>
				<div class="title">显示火灾原因的比例</div>
				<div id="chart-title">
					<p><span id="yhbs"></span>&nbsp;用户不慎</p>
					<p><span id="jydq"></span>&nbsp;家用电器</p>
					<p><span id="wgcz"></span>&nbsp;违规操作</p>
					<p><span id="xy"></span>&nbsp;吸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;烟</p>
					<p><span id="gyzh"></span>&nbsp;故意纵火</p>
					<p><span id="zr"></span>&nbsp;自&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;燃</p>
					<p><span id="qt"></span>&nbsp;其&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他</p>
				</div>
				<canvas id="chart-area" width="300px" height="300px"></canvas>
			</div>
			<button id="shouqiright"></button>
			</div>
		</div>
		<div id="newMessageDIV"></div>
		<script src="/admin/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://cdn.bootcss.com/socket.io/1.3.7/socket.io.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=U25vSd26q851cuSCjMCXuFkYYemWxvRs&services=&t=20170628183224"></script>
    	<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    	<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    	<script type="text/javascript" src="/admin/js/Chart.min.js"></script>
    	<!-- <script type="text/javascript" src="/admin/js/ichart.1.2.min.js"></script> -->
		<script type="text/javascript" src="/admin/js/system.js" charset="utf-8"></script>
	</body>
	<script src="/admin/js/amcharts.js" type="text/javascript"></script>
        <script src="/admin/js/serial.js" type="text/javascript"></script>
	 <script>
            // var chart;

            // var chartData = [
            //    {
            //         " type": "自检",
            //         "visits": 5,
            //         "color": "#FF0F00"
            //     },
            //     {
            //         " type": "防拆警报",
            //         "visits": 1,
            //         "color": "#FF6600"
            //     },
            //     {
            //         " type": "火灾报警",
            //         "visits": 5,
            //         "color": "#FF9E01"
            //     },
            //     {
            //         " type": "欠压报警",
            //         "visits": 1,
            //         "color": "#FCD202"
            //     },
            //     {
            //         " type": "故障报警",
            //         "visits": 4,
            //         "color": "#F8FF01"
            //     }
            // ];


            // AmCharts.ready(function () {
            //     // SERIAL CHART
            //     chart = new AmCharts.AmSerialChart();
            //     chart.dataProvider = chartData;
            //     chart.categoryField = " type";
            //     chart.startDuration = 1;

            //     // AXES
            //     // category
            //     var categoryAxis = chart.categoryAxis;
            //     categoryAxis.labelRotation = 45; // this line makes category values to be rotated
            //     categoryAxis.gridAlpha = 0;
            //     categoryAxis.fillAlpha = 1;
            //     categoryAxis.fillColor = "#FAFAFA";
            //     categoryAxis.gridPosition = "start";

            //     // value
            //     var valueAxis = new AmCharts.ValueAxis();
            //     valueAxis.dashLength = 5;
            //     valueAxis.title = "";
            //     valueAxis.axisAlpha = 0;
            //     chart.addValueAxis(valueAxis);

            //     // GRAPH
            //     var graph = new AmCharts.AmGraph();
            //     graph.valueField = "visits";
            //     graph.colorField = "color";
            //     graph.balloonText = "<b>[[category]]: [[value]]</b>";
            //     graph.type = "column";
            //     graph.lineAlpha = 0;
            //     graph.fillAlphas = 1;
            //     chart.addGraph(graph);

            //     // CURSOR
            //     var chartCursor = new AmCharts.ChartCursor();
            //     chartCursor.cursorAlpha = 0;
            //     chartCursor.zoomable = false;
            //     chartCursor.categoryBalloonEnabled = false;
            //     chart.addChartCursor(chartCursor);

            //     chart.creditsPosition = "top-right";

            //     // WRITE
            //     chart.write("chartdiv");
            // });
        </script>
</html>
